<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DENTAL HOSPITAL PROJECT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" href="css/reset.css"> 
<link rel="stylesheet" media="all" href="css/style_light.css"> 
<link rel="stylesheet" media="all" href="css/slideout.css">
<!-- Current jQuery codebase -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Tiptip is a tooltip or hover replacement for the system default -->
<script src="scripts/jquery.tipTip.js"></script>
<script src="scripts/jquery.tipTip.minified.js"></script>
<!-- Overscroll mimics the iDevice browser behaviour -->
<script src="scripts/jquery.overscroll.js"></script>
<!-- This script are used for the slideout -->
<script type="text/javascript" src="scripts/script.js"></script>

<script type="text/javascript"> 
// Browserswitcher to determine if User is operating from a mobile device, if true the "iOS" like interaction is deactivated
// Returns "TRUE" if user is operating from a mobile device
function MobileUser(){
	var Browser = navigator.userAgent.toLowerCase();
	var MobileBrowsers = "iphone";	
	if (Browser.indexOf(MobileBrowsers) > -1){
		return true;		
	} else {
		return false;
	}	
}
// Calls browserswitcher prior to execution of desktop portion of the site
if (MobileUser() == false){	
	// Resizes the image to fit 100% height of the open browser window
	$(window).load(function() {    
	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();	
		function resizeBg() {	
		        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		            $bg
		                .removeClass()
		                .addClass('bgheight');
		        } else {
		            $bg
		                .removeClass()
		                .addClass('bgwidth');
		        }	
		}	
		theWindow.resize(function() {
			resizeBg();
		}).trigger("resize");	
	});	
	// Overscroll function allows the desktop user to have a "touch-like" interactive experience
	$(function(){   
	// add a google wave to a container div (the ID is my blog ID)
    $("#overscroll2").overscroll();
	});
	$("#link").click(function(){
	    if(!o.data("dragging")) {
	        console.log("clicked!");
	    } else {
	        return false;
	    }
	});
}
</script>    
</head>
<body>
<!-- ADDED CODE FROM NEW SITE -->
	<!-- Top Navigation -->
	<div id="headlines">
		<!-- Headline Wrapper (Dotted Line) -->
		<div id="headlines_around">
			<!-- Headline Story 1 -->
			<div id="headlines_box">
				<div id="headlines_top">
					<h1>Smashed Teeth....</h1>
				</div>
				<p>Front Teeth Smashed in city centre moped.<br />
				<a href="index.html">READ MORE>></a></p>
				<div id="headlines_bottom" style="background-color: #00a6ce"></div>
			</div>
			<!-- Headline Story 2 -->
			<div id="headlines_box">
				<div id="headlines_top">
					<h1>Dracula kid de-fagned...</h1>
				</div>
				<p>Teenage boy gets ready to have a bite taken.<br />
				<a href="index.html">READ MORE>></a></p>
				<div id="headlines_bottom" style="background-color:#9C0;"></div>
			</div>
			<!-- Headline Story 3 -->
			<div id="headlines_box">
				<div id="headlines_top" style="background-color: #ff0099">
					<h1 style="color:#FFF; text-shadow:0px 1px 1px #000;">Loosing a tooth changed...</h1>
				</div>
				<p>Teenage boy gets ready to have a bite taken.<br />
				<a href="index.html">READ MORE>></a></p>
				<div id="headlines_bottom" style="background-color: #ff0099"></div>
			</div>
			<!-- Button to send User back to index.html -->
			<div id="go_home">
				<a href="index.html"><img src="images/home.png" border="0" width="100%"alt="home" /></a>
			</div>
		<!-- Close Headline Wrapper -->	
		</div>
	<!-- Close Top Navigation -->	
	</div>
	<!-- Direct Link to the Hospital Lobby -->
	<div id="hospital">
		<a href="index.html"> <img src="images/treatment.png" width="187" height="46" border="0" alt="treatment" /></a>
	</div>

<!-- ADDED CODE FROM NEW SITE END-->

	<div class="fullscreen">
		<div id="overscroll2"><img src="images/back_web23.jpg" width="6948px" height="801px" id="bg" alt="">
		<!-- slideout tooltips -->
		<p title="An accident in the making" style="top:200px;left200px;">
			This Slideout will do some funky stuff, mainly opening to the bottom right and just looking awesome!
		</p>
		</div>
	</div>
</body>
</html>
